<template>
  <div class="table">
    <div class="item"
         v-for="item in data"
         :key="item.id">
      <div class="col"
           style="width:320px">
        <div style="display: flex;">
          <div class="label"
               style="width:320px">{{item.createTimeOwn}}</div>
          <!-- <div class="label"
             style="width:190px">计划号：{{item.planno}}</div> -->
        </div>

        <div class="value withimg">
          <div>
            <img src="@/assets/images/mt.png"
                 style="">
            <div style="line-height: 26px;min-width: 56px;">
              <el-tooltip :content="tipsList(item).cnName"
                      placement="bottom" popper-class="testtooltip">
                  <span>{{ tipsList(item).cnName | subStr(5) }}</span>
              </el-tooltip>
            </div>
          </div>
          <div>{{ filteredList(item).title }}</div>
        </div>
      </div>
      <!-- <div class="col">
        <div class="label"
             style="width:100px">码头作业区</div>
        <div class="value"> {{item.workzonename}}</div>
      </div> -->
      <!-- <div class="col">
        <div class="label"
             style="width:150px">船名航次</div>
        <div class="value">{{item.ivoyage}}/{{item.evoyage}}</div>
      </div>
      <div class="col">
        <div class="label">船舶动态</div>
        <div class="value">{{item.eta}}</div>
      </div> -->

      <div class="col">
        <div class="label"
             style="width:130px">计划号</div>
        <div class="value">{{item.planno}}</div>
      </div>
      <div class="col">
        <div class="label"
             style="width:150px">计划状态</div>
         
             <div class="value circle" v-if="['R','F'].includes(item.planstatus)">
              <span :style="{background:planstatus[item.planstatus].color}"
                    style="margin-top: 20px;"></span>
                  <el-tooltip :content="item.reason"
                      placement="bottom"
                      popper-class="testtooltip">
                    <span>{{planstatus[item.planstatus].name}}</span>
                  </el-tooltip> 
            </div>
            
        <div class="value circle" v-else>
          <span :style="{background:planstatus[item.planstatus].color}"
                style="margin-top: 20px;"></span>
          <span>{{planstatus[item.planstatus].name}}</span>
        </div>
      </div>
      <div class="col">
        <div class="label"
             style="width:100px">作业状态</div>
          <span class="value circle">
            
            <span :style="{background:pstatusList(item).color}"
                style="margin-top: 20px;"></span>
            <span>{{pstatusList(item).value}}</span>
              
          </span>
      </div>
      <div class="col">
        <div class="label">计划开始时间</div>
        <div class="value" style="width:200px">{{item.opsttm}}</div>
      </div>
      <div class="col">
        <div class="label">计划结束时间</div>
        <div class="value" style="width:200px">{{item.opedtm}}</div>
      </div>
      <div class="col">
        <div class="label">计划箱（个）</div>
        <div class="value">{{item.jihuaxiangCount}}</div>
      </div>
      <div class="col" style="width: 200px;">
        
      </div>
      <div class="col fixed">
        <div class="label"  style="width:200px">操作</div>
        <div class="value btns">
          <div> 
             <div style="display: flex;">
              <el-button @click="handleClick(item,'see')"
                        type="text"
                        style="color: #1955CF">查看详情</el-button>

              <el-button @click="handleClick(item,'edit')"
                        type="text" v-if="['P','R','F'].includes(item.planstatus) && (item.cstCstmcd===perCd)"
                        style="color: #1955CF">编辑</el-button>
              <el-button @click="delTable(item)"
                        type="text" v-if="['P','R','F'].includes(item.planstatus) && (item.cstCstmcd===perCd)"
                        style="color: #1955CF">取消</el-button>
            </div>
            <div style="display: flex;">
              <el-button @click="$emit('carPlan',item,perCd)"
                      type="text"
                      style="color: #1955CF" v-if="!(['UNBOX','BOX_APPOINT','BOX'].includes(item.planTagExt))">车队计划</el-button>
              <el-button @click="$emit('driverCertificate',item,item.flag)"
                  type="text"
                  style="color: #1955CF" v-if="!(['UNBOX','BOX_APPOINT','BOX'].includes(item.planTagExt))">
                  {{item.flag != '0' ?'查看凭证':'生成二维码'}}
              </el-button>
            </div>      
          </div>
              
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myTable2',
  props: {'data':{},tips: [],},
  components: {},
  data() {
    return {
      perCd:JSON.parse(localStorage.getItem('userInfo')).customerCode,
      listP: [],
      planstatus: {
        P: { name: '初始', color: '#DDDDDD' },
        M: { name: '待确认', color: '#DDDDDD' },
        W: { name: '待审核', color: '#1075FF' },
        R: { name: '审核不通过', color: '#FF3838' },
        A: { name: '审核通过', color: '#FF960E' },
        S: { name: '下发成功', color: '#15C0E6' },
        F: { name: '下发失败', color: '#043AA7' },
        Y: { name: '已支付', color: '#12BF1E' },
        N: { name: '取消', color: '#DDDDDD' },
      },
      pstatus:[
        {label:'PLAN',key:"P", value:"计划",color:'#1075FF'},
        {label:'WORKING',key:"W", value:"作业中",color:'#13D55C'},
        {lebel:'FINISH',key:"C",value: "完成",color:'#F56C6C'},
        {label:'CANCEL',key:"N",value:"取消",color:'#DDDDDD'}
      ],
      // listP: [
      //   {
      //     title: '卸船直提',
      //     name: '船--场',
      //     path: 'XCZT_G',
      //   },
      //   {
      //     title: '卸船入库',
      //     name: '船--场',
      //     path: 'XCRK_G',
      //   },
      //   {
      //     title: '装船直装',
      //     name: '场--船',
      //     path: 'ZCZZ_G',
      //   },
      //   {
      //     title: '装船出库',
      //     name: '船--场',
      //     path: 'ZCCK_G',
      //   },
      //   {
      //     title: '进货',
      //     name: '船--场',
      //     path: 'JH_G',
      //   },
      //   {
      //     title: '提货',
      //     name: '场--船',
      //     path: 'TH_G',
      //   },
      // ],
      methodsTag: [
        {
          name: '',
          query: '',
          path: '',
        },
      ],
      planTag: [
        { title: '全部状态', value: null },
        {
          title: '提重返空',
          name: 'heavyEmpty',
          value: 'PFRE',
        },
        {
          title: '提空返重（不指定箱号）',
          name: 'emptyHeavyNoNum',
          value: 'PERF_NC',
        },
        {
          title: '提空返重（指定箱号）',
          name: 'emptyHeavyNum',
          value: 'PERF_WC',
        },
        {
          title: '进空',
          name: 'emptyBox',
          value: 'IE',
        },
        {
          title: '进重',
          name: 'heavyBox',
          value: 'IF',
        },
        {
          title: '提重',
          name: 'heayBoxNum',
          value: 'PF',
        },
        {
          title: '提空（不指定箱号）',
          name: 'emptyBoxNoNum',
          value: 'PE_NC',
        },
        {
          title: '提空（指定箱号）',
          name: 'emptyBoxNum',
          value: 'PE_WC',
        },
        {
          title: '拆箱',
          name: 'unpacking',
          value: 'UNBOX',
        },
        {
          title: '装箱（不指定箱号）',
          name: 'packingNoNum',
          value: 'BOX',
        },
        {
          title: '装箱（指定箱号）',
          name: 'packingNum',
          value: 'BOX_APPOINT',
        },
      ],
      
    }
  },

  methods: {
    
    tipsList(item) {
      let c =  this.tips.filter(item1 => item1.termCode === item.termCode);
      if(c.length>0){
        return c[0]
      }else{
        return {}
      }
    },
    filteredList(item) {
      let c =  this.planTag.filter(item1 => item.planTagExt === item1.value);
      if(c.length>0){
        return c[0]
      }else{
        return {}
      }
    },
    pstatusList(item) {
      let c =  this.pstatus.filter(item1 => item.pstatus===item1.key);
      if(c.length>0){
        return c[0]
      }else{
        return {}
      }
    },
    delTable(e) {
      let that = this
      this.$confirm('确定要删除计划吗？')
        .then((_) => {
          that.$api
            .planCancel([e.planno])
            .then((res) => {
              if (200 === res.code) {
                this.$message.success('删除成功')
                this.$emit('delInfo')
              } else {
                //this.$message.error(res.message)
              }
            })
            .catch((res) => {
              //this.$message.error(res.message)
            })
        })
        .catch((_) => {})
    },
    handleClick(row, e) {
      console.log(row)
      //this.dialog=true
      if ('see' !== e) {
        this.title = '编辑'
        this.see = false
      } else {
        this.title = '查看'
        this.see = true
      }
      //localStorage.setItem('myDate', JSON.stringify(row))
      this.link(row, e)
    },
    link(row, e) {
      let c = ''
      //let that=this
      this.planTag.forEach((element) => {
        if (row.planTagExt === element.value) {
          c = element
        }
      })
      let par={
        name: c.name,
        query: {
          state: e,
          id: row.id,
          type: c.key,
        },
      }
      if('see'===e){
        let {href} = this.$router.resolve(par)
        window.open(href,'_blank')
      }else{
        this.$router.push(par)
      }
    },
    edit(item) {
      this.$router.push({
        name: 'addPlan',
        query: {
          scdType: item.scdType,
          id: item.id,
        },
      })
    },
    del(id) {
      this.$emit('del', id)
    },
    // handleClick(row,e) {
    //   console.log(row);
    //   //this.dialog=true
    //   if('see'!==e){
    //     this.title='编辑'
    //     this.see=false
    //   }else{
    //     this.title='查看'
    //     this.see=true
    //   }
    //   localStorage.setItem('myDate',JSON.stringify(row))
    //   this.link()
    // },
    // link(){
    //   this.$router.push({
    //     name: 'addPlan',
    //     query: {
    //       scdType: item.scdType,
    //       id: item.id,
    //     },
    //   })
    // },
  },

  computed: {},

  mounted() {},
}
</script>
<style lang='scss' scoped>
.table {
  overflow-x: auto;
  //min-height: 800px;
}
.item {
  display: flex;
  margin-top: 20px;
  width: auto;
  line-height: 50px;
  .fixed {
    position: absolute;
    right: 14px;
    border-left: 1px solid #ebeef5;
    box-shadow: -3px 0px 10px #ebeef5;
    background-color: #fff;
  }
  .col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    .label {
      height: 33px;
      background: #f5f5f5;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .value {
      height: 70px;
      border: 1px solid #e5e5e5;
      border-left: 0;
      display: flex;
      align-items: flex-start;
      padding: 10px;
      box-sizing: border-box;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #000000;
    }
    
    .btns {
      display: flex;
      // align-items: center;
      // flex: 1;
      button {
        font-size: 14px;
        margin-left: 5px;
        line-height: 0px;
      }
    }
    img {
      width: 30px;
      height: 27.95px;
    }
    .withimg {
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
      }
    }
  }
}
.circle {
  display: flex;
  align-items: center;
  span:first-child {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
</style>